<template>
  <div style="height: 100%;">
    <navbar :title="$t('errorPractice')" :backCallback="back">
        <template #right>
            <span class="write-btn-right font-size15 head-right cur" @click="submit(false)">{{ $t("submit_practice") }}</span><!--交卷-->
        </template>
    </navbar>
    <div class="exam-nav bottom-shadow-02" style="position: absolute;top: 56px;left: 0;width: calc(100% - 30px);">
        <div><!--已答/未答-->
            <p class="margin-right20">{{ $t("mod_anwser") }} <span style="color:#1a1a1a;">({{answered.length}}/{{topicList.length}})</span></p>
        </div>
        <div><!--练习用时-->
            <span class="color999">{{ $t("practiced_time") }} </span><span class="color518">({{timeText}})</span>
        </div>
    </div>
    <div class="content" id="content-box" style="overflow: auto;background: #ffffff;">
        <!--body-->
        <div class="exam-body">
            <div v-for="(item, index) in topicList" :key="index" :ref="index">
                <!--MC 单选-->
                <div v-show="topicIndex === index" v-if="item.questionInfoDTO.type == 'MC'" class="topic-mc white-bg" style="padding: 60px 15px 30px;">
                    <div>
                        <p class="font-size16 margin-bottom10">[{{ $t("Mc_sin") }}]</p><!--单选题-->
                        <p class="font-size16" style="margin-bottom: 40px;">{{index + 1}}.
                            <span v-html="item.questionInfoDTO.content"></span>
                        </p>
                        <ul class="module-list-06 selection-01">
                            <li  :class="{'cur': item.answerOptions && item.answerOptions[0] == option.optId}"
                                @click="selectAnswer('MC', $index + 1, item.queId, index)"
                                v-for="(option, $index) in item.questionInfoDTO.mcQuestionInfoDTO.mcOptionList" :key="$index">
                                <i></i><span v-html="option.optBody"></span>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--多选-->
                <div v-show="topicIndex === index" v-if="item.questionInfoDTO.type == 'MCQ'" class="topic-mc white-bg" style="padding: 60px 15px 30px;">
                    <div>
                        <p class="font-size16 margin-bottom10">[{{ $t("MCQ") }}]</p>
                        <p class="font-size16" style="margin-bottom: 40px;">{{index + 1}}.
                            <span v-html="item.questionInfoDTO.content"></span>
                        </p>
                        <ul class="module-list-06 selection-02">
                            <li :class="{'cur': item.answerOptions && item.answerOptions.includes(option.optId )}"
                                @click="selectAnswer('MCQ', $index + 1, item.queId, index)"
                                v-for="(option, $index) in item.questionInfoDTO.mcQuestionInfoDTO.mcOptionList" :key="$index">
                                <i></i><span v-html="option.optBody"></span>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--FB 填空题-->
                <div v-show="topicIndex === index" v-if="item.questionInfoDTO.type == 'FB'" class="topic-fb" style="padding: 60px 15px 30px;">
                    <div class="font-size16">
                        <p class="font-size16 margin-bottom10">[{{ $t("FB") }}]</p>
                        <p>{{index + 1}}.<span v-html="$options.filters.filterSpace(item.questionInfoDTO.content, item.queId)"></span></p>
                    </div>
                    <div v-for="(childId, topic) in statisticsSpace(item.questionInfoDTO.content)" :key="topic">
                        <div>{{ $t("FB_label") }} {{topic + 1}}</div>
                        <div class="fb-space"  v-showText="item.answerFillBlank ? item.answerFillBlank[topic] : ''"
                            :name="`${item.queId}${topic}`" :ref="`fb${item.queId}`" contenteditable="true" :placeholder="$t('answer_prompt_1')"
                            @input="selectAnswer('FB',`fb${item.queId}`,item.queId, index)"></div>
                        <p style="margin: 0;display: none" :ref="`fbError${item.queId}${topic}`" class="font-size11 colorfd3 warning-red-tan warning">{{ $t('exceeded_word_range_tips', {'value': '200'}) }}</p>
                    </div>
                </div>
                <!--TF 判断题-->
                <div v-show="topicIndex === index" v-if="item.questionInfoDTO.type == 'TF'" class="topic-mc white-bg" style="padding: 60px 15px 30px;">
                    <div>
                        <p class="font-size16 margin-bottom10">[{{ $t("TF") }}]</p>
                        <p class="font-size16" style="margin-bottom: 40px;">{{index + 1}}.
                            <span v-html="item.questionInfoDTO.content"></span>
                        </p>
                        <ul class="module-list-06 selection-01">
                            <li :class="{'cur': item.answerJudgment && item.answerJudgment  == true}" @click="selectAnswer('TF', true, item.queId, index)">
                                <i></i>{{ $t("lab_true") }}
                            </li>
                            <li :class="{'cur':  item.answerJudgment == false}" @click="selectAnswer('TF', false, item.queId, index)">
                                <i></i>{{ $t("lab_false") }}
                            </li>
                        </ul>
                    </div>
                </div>
                <!--MT 配对题-->
                <div v-if="topicIndex === index">
                    <div v-if="item.questionInfoDTO.type == 'MT'" class="topic-mt" style="background: #f5f5f5;">
                        <div style="padding: 60px 15px 0;">
                            <p class="font-size16 margin-bottom10">[{{ $t("MT") }}]</p>
                            <div class="font-size16">
                                {{index + 1}}. <span v-html="item.questionInfoDTO.content"></span>
                            </div>
                            <scroll-tab :no-scroll="true" class="tab-box tab-box-2">
                                <tab-item @on-item-click="(event) => onItemClick(item, index,event)">
                                    <div style="background: #f5f5f5">
                                        {{ $t("selected_from") }}
                                    </div>
                                </tab-item>
                                <tab-item @on-item-click="(event) => onItemClick(item, index,event)">
                                    <div style="background: #f5f5f5">
                                        {{ $t("cos_target") }}
                                    </div>
                                </tab-item>
                            </scroll-tab>
                        </div>
                        <div style="background: #ffffff;padding: 30px 15px 0;" v-show="item.switchTabIndex == 0" >
                            <div v-for="(topic, index) in item.questionInfoDTO.queSource" :key="index" style="margin-bottom: 50px;">
                                <div>
                                    {{letterList[index]}}. <span v-html="topic.srcBody"></span>
                                </div>
                                <div style="margin-top: 20px;">
                                    <img v-if="topic.srcImage" :src="matchingImg(topic.srcImage)" alt="" width="150" height="150">
                                </div>
                            </div>
                        </div>
                        <div style="padding: 30px 15px 0;background: #ffffff;" class="topic-mt-matching" v-show="item.switchTabIndex == 1">
                            <div v-for="(topic, index) in item.questionInfoDTO.queTarget" :key="index" style="margin-bottom: 50px;">
                                <div class="clearfix" style="width: 100%;">
                                    ({{index + 1}})
                                    <div class="topic-mt-matching-btn" style="float: right;" @click="mtTipsCLick(item, item.queId, index+1)">
                                        {{item.answerMatching && item.answerMatching[index+1] ? $t("selected_from") + ' ' + letterList[item.answerMatching[index+1] - 1] : $t("selecting_source")}}
                                    </div>
                                </div>
                                <div style="margin-top: 20px;">
                                    <div v-html="topic.tgtBody"></div>
                                    <img style="margin-top: 20px;" v-if="topic.tgtImage" :src="matchingImg(topic.tgtImage)" alt="" width="150" height="150">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="exam-foot">
        <div @click="answerLetter = true"><!--答题卡-->
            {{ $t("mod_ans_card") }}
        </div>
        <div>
            <div @click="prev" :class="{'cur': topicIndex == 0}"><!--上一题-->
                {{ $t("mod_prev") }}
            </div>
            <div @click="next" :class="{'cur': topicList.length - 1 == topicIndex}"><!--下一题-->
                {{ $t("mod_next") }}
            </div>
        </div>
    </div>
    <!--tip-->
    <van-dialog
        v-model="mtTips"
        :show-confirm-button="false"
        >
        <div style="text-align: center;">
            <div style="padding: 20px 0;font-size: 18px;">{{ $t("selecting_target", {'value': '(' + mtOption.index + ')'}) }}</div><!--选择目标/来源-->
            <div style="color: #999999;font-size: 14px;margin-bottom: 15px;">{{ $t("selecting_source_tips") }}</div><!--重复选择「来源」会将前一个选择项清空-->
            <ul class="module-list-06 selection-01 mt-selection">
                <li v-for="(item, index) in mtOption.options " @click="mtConfirm(index+1, mtOption.index)" :key="index" :class="{'cur': mtOption.answerMatching && mtOption.answerMatching[mtOption.index] == index+1}">
                    <i></i>{{item.subject}}
                    <span v-show="mtOption.answerMatching && Object.values(mtOption.answerMatching).includes(index+1) && mtOption.answerMatching[mtOption.index] != index+1" style="float: right;">{{ $t("selecting_already") }}</span><!--已选-->
                </li>
            </ul>
        </div>
    </van-dialog>
    <van-dialog
        v-model="subTips"
        show-cancel-button
        :title="subType"
        :cancelButtonText="$t('cancel')"
        :confirm-button-text="$t('sure')"
        @confirm="submit(true)"
        >
    </van-dialog>
    <!--答题卡-->
    <div class="answer-letter" v-show="answerLetter">
        <div class="answer-letter-content">
            <div>
                <div class="answer-letter-close">
                    <i class="close-icon-02" @click="answerLetter = false"></i>
                </div>
                <div class="answer-letter-title">{{ $t("mod_ans_card") }}</div><!--答题卡-->
                <div class="answer-letter-tip">
                    <div><!--已回答-->
                        {{ $t("mod_anwsered") }}
                    </div>
                    <div><!--未回答-->
                        {{ $t("mod_wait_anwser") }}
                    </div>
                </div>
            </div>
            <div class="answer-letter-list">
                <ul class="clearfix">
                    <li @click="jumpTopic(index, item)" v-for="(item, index) in topicList" :key="index" :class="{'cur': answered.includes(item.queId)}">
                        {{index+1}}
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--loading-->
    <div class="loading" v-if="subLoading">
        <div >
            <div style="width: 33px;height: 33px;">
                <img src="../../../static/images/loading.gif" alt="" style="width: 100%"/>
            </div>
            <div>{{ $t("lab_loading") }}</div><!--加载中...-->
        </div>
    </div>
    <!--确定退出练习？系统将不会保存您的练习记录。-->
    <van-dialog
        v-model="leave"
        show-cancel-button
        :cancelButtonText="$t('cancel')"
        :confirm-button-text="$t('sure')"
        :title="$t('exit_practice_tip')"
        @confirm="confirmBack()"
        >
    </van-dialog>
    <!--errorTip-->
    <van-dialog
        v-model="error"
        :show-confirm-button="false"
        >
        <div style="text-align: center;">
            <div style="font-size: 18px;padding: 20px 0;">{{ $t("exam_tips_3") }}</div><!--题目答案超出规定字数，请修改-->
            <div style="color: #999999;font-size: 14px;">{{ $t("exam_tips_4") }}</div><!--点击下列题目序号直接修改-->
            <div style="overflow:hidden;">
                <ul>
                    <li class="errorList" @click="jumpTopic(item)" v-for="item in errorList" :key="item">{{item + 1}}</li>
                </ul>
            </div>
        </div>
    </van-dialog>
  </div>
</template>

<script>
import { Toast } from 'vant';
import {tabItem, scrollTab} from '@/repeatComponents/scrollTab/index';
let that;
export default {
    name: 'practice',
    components: {tabItem, scrollTab, vanToast: Toast},
    data() {
        return {
            siIndex: 0,
            topicList: [], //题目列表
            topicIndex: 0, //显示当前题目
            letterList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
            switchTabIndex: 0,
            mtTips: false,
            mtOption: {
                id: '',
                list: []
            },
            allInfo: {},
            timeText: '00:00:00', //时间显示倒计时
            countDown: 1, // 练习用时,初始时间为1s,为了防止一进去就里面提交,提交用时为0而导致没有提交记录
            answered: [], //已回答
            answerLetter: false,
            subTips: false, //
            subType: '',
            subLoading: false,
            leave: false,
            error: false,
            errorList: [], //校验错误题目
            confirmBackFlag: false, //是否确认推出测验，用于游览器和app端按键返回的二次校验
            intervalNum: null
        };
    },
    methods: {
        /**
         * 查询练习题目
         */
        firstEntry() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/error-question-practice/${this.$route.query.id}`
            }).then(res => {
                this.allInfo = res.data;
                this.topicList = res.data.refList;
                // 开启练习用时
                clearInterval(this.intervalNum);
                this.intervalNum = setInterval(() => {
                    this.countDown++;
                }, 1000);
                this.switchTabMT(this.topicList);
            });
        },
        switchTabMT(topicList) {
            topicList.forEach(item => {
                if (item.questionInfoDTO.type === 'MT') {
                    item.questionInfoDTO.switchTabIndex = 0;
                }
            });
        },
        /**
         * 填空题数量
         * @param value
         * @returns {*}
         */
        statisticsSpace(value) {
            return value.match(/\[_]/g).length;
        },
        onItemClick(item, index, event, index1 = 0) {
            this.$set(this.topicList[index], 'switchTabIndex', event);
            this.$forceUpdate();
        },
        /**
         * 下一题
         */
        next() {
            if (this.topicIndex === this.topicList.length - 1) {
                return;
            }
            this.topicIndex += 1;
        },
        prev() {
            if (this.topicIndex === 0) {
                return;
            }
            this.topicIndex -= 1;
        },
        /**
         * 选择答案
         * @param type
         * @param answer
         * @param id
         * @param index
         */
        selectAnswer(type, answer, id, index) {
            //选择题乱序
            let _answer;
            switch (type) {
            case 'MC':
                _answer = this.topicList[index].questionInfoDTO.mcQuestionInfoDTO.mcOptionList[answer - 1].optId;
                this.$set(this.topicList[index], 'answerOptions', [_answer]);
                break;
            case 'MCQ':
                _answer = this.topicList[index].questionInfoDTO.mcQuestionInfoDTO.mcOptionList[answer - 1].optId;
                if (!this.topicList[index].answerOptions) {
                    this.$set(this.topicList[index], 'answerOptions', [_answer]);
                } else {
                    let arr = new Set(this.topicList[index].answerOptions);
                    if (arr.has(_answer)) {
                        arr.delete(_answer);
                    } else {
                        arr.add(_answer);
                    }
                    this.$set(this.topicList[index], 'answerOptions', [...arr]);
                }
                break;
            case 'TF':
                this.$set(this.topicList[index], 'answerJudgment', answer);
                break;
            case 'FB':
                let arr = [];
                let errors = [];
                for (let i of this.$refs[answer]) {
                    if (this.checkingSize(i.innerHTML, 400, index)) {
                        errors.push(i.getAttribute('name'));
                        this.$refs['fb' + 'Error' + i.getAttribute('name')][0].style.display = 'block';
                    } else {
                        errors.splice(0, errors.indexOf(i.getAttribute('name')));
                        this.$refs['fb' + 'Error' + i.getAttribute('name')][0].style.display = 'none';
                    };
                    arr.push(i.innerHTML);
                }
                if (errors.length === 0) {
                    if (this.errorList.includes(index)) {
                        this.errorList.splice(this.errorList.indexOf(index), 1);
                    }
                } else {
                    if (!this.errorList.includes(index)) {
                        this.errorList.push(index);
                    }
                }
                this.$set(this.topicList[index], 'answerFillBlank', arr);
                break;
            }
            this.getAnswered(index);
        },
        /**
         * 配对题弹层选择
         * @param list
         * @param id
         */
        mtTipsCLick(list, id, index, siIndex) {
            this.mtTips = true;
            this.mtOption = list;
            this.mtOption.index = index;
            this.siIndex = siIndex;
        },
        mtConfirm(answer) {
            let obj = {};
            obj[this.mtOption.index] = answer;
            if (!this.mtOption.answerMatching) {
                this.$set(this.mtOption, 'answerMatching', {...obj});
            } else {
                for (let item in this.mtOption.answerMatching) {
                    if (this.mtOption.answerMatching[item] === answer) {
                        this.$delete(this.mtOption.answerMatching, item);
                    }
                }
                this.$set(this.mtOption, 'answerMatching', {...this.mtOption.answerMatching, ...obj});
            };
            this.mtTips = false;
            this.getAnswered(this.siIndex);
        },
        matchingImg(imgUrl) {
            if (imgUrl.indexOf('../') === 0) {
                return imgUrl.replace('../../..', this.appUrl);
            } else {
                return this.appUrl + imgUrl;
            }
        },
        submit(isSub) {
            if (!isSub) {
                this.subTips = true;
                this.confirmBackFlag = true;
                if (this.topicList.length !== this.answered.length) {
                    this.subTips = true;
                    this.subType = this.$t('exam_tips_6'); //还有题目未做完，确定交卷？
                } else {
                    this.subTips = true;
                    this.subType = this.$t('exam_tips_7'); //题目已做完，确定交卷？
                }
            } else {
                if (this.errorList.length >= 1) {
                    this.error = true;
                    return false;
                }
                this.subLoading = true;
                this.$axios({
                    method: 'POST',
                    url: `/app/api/trainee/error-question-practice/submit`,
                    data: {
                        ...this.allInfo,
                        userAnswer: this.getAnswer(),
                        practiceTime: this.countDown,
                        eqPracticeId: this.$route.query.id
                    }
                }).then(res => {
                    this.subLoading = false;
                    this.$router.push({path: `/mistakeExercises/report?id=${this.$route.query.id}`});
                }).catch(error => {
                    let msg = error.response.data.errCode;
                    Toast(this.$t(`requestError.${msg}`));
                    this.$router.go(-1);
                });
            }
        },
        /**
         * 获取的试题的答案
         */
        getAnswer() {
            let obj = {};
            for (let item of this.topicList) {
                switch (item.questionInfoDTO.type) {
                case 'MC':
                    obj[item.queId] = {
                        queId: item.queId,
                        answerOptions: item.answerOptions || []
                    };
                    break;
                case 'MCQ':
                    obj[item.queId] = {
                        queId: item.queId,
                        answerOptions: item.answerOptions || []
                    };
                    break;
                // 填空
                case 'FB':
                    let arr = [];
                    if (item.answerFillBlank === null || !item.answerFillBlank || item.answerFillBlank.length === 0) {
                        let len = item.questionInfoDTO.content.match(/\[_]/g).length;
                        for (let i = 0; i < len; i++) {
                            arr.push('');
                        }
                    } else {}
                    obj[item.queId] = {
                        queId: item.queId,
                        answerFillBlank: item.answerFillBlank && item.answerFillBlank.length !== 0 ? item.answerFillBlank : arr
                    };
                    break;
                case 'MT':
                    obj[item.queId] = {
                        queId: item.queId,
                        answerMatching: item.answerMatching || null
                    };
                    break;
                case 'TF':
                    obj[item.queId] = {
                        queId: item.queId,
                        answerJudgment: (item.answerJudgment || item.answerJudgment === false) ? item.answerJudgment : null
                    };
                    break;
                }
            }
            return obj;
        },
        getAnswered(index = 0) {
            let arr = [];
            let dataAll = this.getAnswer();
            let answerFillBlankAir = [];
            let siArr = [];
            let data = [];

            let topicDataIds = [];
            for (let i in dataAll) {
                if (topicDataIds.includes(dataAll[i].queId)) {
                    siArr.push(dataAll[i]);
                    let other = [];
                    siArr.map(item => {
                        if (item.answerMatching ||
                            (item.answerJudgment || item.answerJudgment === false) ||
                            (item.answerOptions && item.answerOptions.length !== 0) ||
                            (item.answerShort)
                        ) {
                            other.push(item);
                        } else if (item.answerFillBlank && item.answerFillBlank.length !== 0) {
                            for (var j = 0; j < item.answerFillBlank.length; j++) {
                                if (item.answerFillBlank[j]) {
                                    answerFillBlankAir.push(j);
                                }
                            }
                            if (answerFillBlankAir.length === item.answerFillBlank.length) {
                                other.push(item);
                            }
                            answerFillBlankAir = [];
                        }
                    });
                    if (other.length === this.topicList[index].questionInfoList.length) {
                        this.topicList[index].answer = true;
                    } else {
                        this.topicList[index].answer = false;
                    }
                } else {
                    if (!data.includes(dataAll[i].queId)) {
                        if (dataAll[i].answerMatching) {
                            arr.push(dataAll[i].queId);
                        }
                        if (dataAll[i].answerJudgment || dataAll[i].answerJudgment === false) {
                            arr.push(dataAll[i].queId);
                        }
                        if (dataAll[i].answerOptions && dataAll[i].answerOptions.length !== 0) {
                            arr.push(dataAll[i].queId);
                        }
                        if (dataAll[i].answerFillBlank && dataAll[i].answerFillBlank.length !== 0) {
                            for (var j = 0; j < dataAll[i].answerFillBlank.length; j++) {
                                if (dataAll[i].answerFillBlank[j]) {
                                    answerFillBlankAir.push(j);
                                }
                            }
                            if (answerFillBlankAir.length === dataAll[i].answerFillBlank.length) {
                                arr.push(dataAll[i].queId);
                            }
                            answerFillBlankAir = [];
                        }
                        if (dataAll[i].answerShort) {
                            arr.push(dataAll[i].queId);
                        }
                    }
                }
            }
            this.answered = arr;
            this.topicList.map(item => {
                if (item.answer) {
                    this.answered.push(item.queId);
                }
            });
        },
        jumpTopic(index, item) {
            this.error = false;
            this.answerLetter = false;
            this.topicIndex = index;
        },
        back() {
            this.leave = true;
        },
        confirmBack() {
            //确认推出
            this.confirmBackFlag = true;
            this.$router.go(-1);
        },
        checkingSize(value, size) {
            let num = 0;
            for (let i of value) {
                if (value.charCodeAt(i) > 127 || value.charCodeAt(i) === 94) {
                    num += 2;
                } else {
                    num += 1;
                }
            }
            if (num > size) {
                return true;
            } else {
                return false;
            }
        }
    },
    beforeCreate() {
        that = this;
    },
    created() {
        this.firstEntry();
    },
    mounted() {
    },
    watch: {
        topicList: function() {
            //$nextTick 里面DOM更新是指页面上的数据是最新的数据。
            this.$nextTick(function() {
                for (let i = 0; i < this.topicList.length; i++) {
                    let item = this.topicList[i];
                    if (item.type === 'FB') {
                        this.selectAnswer('FB', `fb${item.queId}`, item.queId, i);
                    }
                }
            });
        },
        countDown() {
            let h = parseInt(this.countDown / 60 / 60 % 24);
            h = h < 10 ? '0' + h : h;
            let m = parseInt(this.countDown / 60 % 60);
            m = m < 10 ? '0' + m : m;
            let s = parseInt(this.countDown % 60);
            s = s < 10 ? '0' + s : s;
            const time = h + ':' + m + ':' + s;
            this.$nextTick(() => {
                this.timeText = time;
            });
        }
    },
    destroyed() {
        clearInterval(this.intervalNum);
    },
    filters: {
        //填空
        filterSpace(value, id) {
            let space = value.match(/\[_]/g);
            let blank = that.$t('FB_label'); //填空;
            for (let i = 0; i < space.length; i++) {
                value = value.replace('[_]', `<span style="display: inline-block;padding: 0 10px;border-bottom: 1px solid #333;margin: 0 8px;font-size: 14px;">${blank} ${i + 1}</span>`);
            }
            return value;
        }
    },
    directives: {
        showText: {
            bind(el, binding) {
                el.innerHTML = binding.value ? binding.value : '';
            }
        }
    },
    beforeRouteLeave(to, from, next) {
        this.leave = true;
        if (this.confirmBackFlag) {
            next();
        } else {
            if (to.path !== this.$route.path) {
                window.history.pushState(null, null, from.path);
            }
        }
    }
};
</script>

<style scoped lang="less">
.type-si{
  /deep/pre{
      white-space: pre-wrap;
  }
}
  .errorList{
      width: 32px;
      height: 32px;
      float: left;
      margin: 10px 10px;
      border-radius: 100%;
      border: 1px solid #cccccc;
      text-align: center;
      line-height: 32px;
      background: #075ebb;
      color: #ffffff;
  }
  .exam-nav{
      background: #ffffff;
      overflow: hidden;
      height: 44px;
      line-height: 44px;
      &>div:first-child{
          float: left;
          color: #999999;
          &>p{
              float: left;
          }
       }
      &>div:last-child{
          float: right;
      }
  }
  .exam-foot{
      height: 56px;
      background: #ffffff;
      border-top: 1px solid #cccccc;
      position: absolute;
      bottom: 0;
      width: 100%;
      display: flex;
      padding: 0 16px;
      box-sizing: border-box;
      &>div:first-child{
          width: 90px;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          text-align: center;
          &:before{
              content: '';
              display: block;
              width: 20px;
              height: 20px;
              background: url(./images/course-icon.png) no-repeat 0 -246px;
              background-size: 20px;
          }
      }
      &>div:last-child{
          display: flex;
          align-items: center;
          &>div{
              &.cur{
                  color: #cccccc;
                  background: #ffffff;
              }
              width: 120px;
              height: 40px;
              text-align: center;
              line-height: 40px;
              border: 1px solid #dddddd;
              border-radius: 8px;
              &:last-child{
                  &.cur{
                      color: #cccccc;
                      background: #ffffff;
                  }
                  background: #075ebb;
                  color: #ffffff;
                  margin-left: 15px;
              }
          }
      }
  }
  .topic-fb{
      &>div:first-child{
          margin-bottom: 25px;
      }
      .fb-space{
          padding: 10px 15px;
          border: 1px solid #dddddd;
          margin: 5px 0;
          &:empty:before{
              content: attr(placeholder);
              color:#999;
          }
          &:focus:before{
              content:none;
          }
      }
  }
  .topic-es{
      .topic-es-box {
          margin-top: 25px;
          min-height: 150px;
          border: 1px solid #dddddd;
          padding: 10px;
          &:empty:before{
              content: attr(placeholder);
              color:#999;
          }
          &:focus:before{
              content:none;
          }
      }
  }
  .topic-mt{
      .topic-mt-matching{
          .topic-mt-matching-btn{
              display: inline-block;
              padding: 5px 15px;
              background: #075ebb;
              color: #ffffff;
          }
      }
  }
  /*单选题*/
  .module-list-06{
      li{
          color: #999999;
          font-size: 14px;
          border: 1px solid #e6e6e6;
          border-radius: 2px;
          padding: 15px 15px 15px 45px;
          margin-bottom: 15px;
          &:nth-last-child(1){
              margin-bottom: 0;
          }
          &.cur{
              background: #f5f8fe;
              border-color: #075ebb;
              color: #075ebb;
          }
      }
      &.selection-01 {
          li{
              i{
                  float: left;
                  margin-left: -30px;
                  width: 20px;
                  height: 20px;
                  background: url(../../../static/images/icon-04.png) no-repeat 0 -96px;
                  background-size: 20px;
              }
              &.cur{
                  i{
                      background-position: 0 -156px;
                  }
              }
          }
      }
      &.selection-02{
          li{
              i{
                  float: left;
                  margin-left: -30px;
                  width: 20px;
                  height: 20px;
                  background: url(../../../static/images/icon-04.png) no-repeat 0 -126px;
                  background-size: 20px;
              }
              &.cur{
                  i{
                      background-position: 0 -186px;
                  }
              }
          }
      }
  }
  .module-list-06.selection-01.mt-selection {
      max-height: 400px;
      overflow-y: auto;
      padding: 0 25px;
  }
  .answer-letter{
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      bottom: 0;
      background: rgba(0,0,0,.5);
      .answer-letter-content{
          position: absolute;
          background: #ffffff;
          width: 100%;
          bottom: 0;
      }
      .answer-letter-title{
          padding: 10px 15px;
          font-size: 18px;
      }
      .answer-letter-tip{
          overflow: hidden;
          padding: 10px 15px;
          div{
              float: left;
              color: #cccccc;
              &:first-child{
                  margin-right: 20px;
                  &:before{
                      content: '';
                      display: inline-block;
                      width: 12px;
                      height: 12px;
                      background: #5084EC;
                      margin: 0 5px -2px 0;
                      border-radius: 100%;
                  }
              }
              &:last-child{
                  &:before{
                      content: '';
                      display: inline-block;
                      width: 12px;
                      height: 12px;
                      border: 1px solid #cccccc;
                      margin: 0 5px -2px 0;
                      border-radius: 100%;
                  }
              }
          }
      }
      .answer-letter-list{
          max-height: 300px;
          overflow: auto;
          li{
              width: 32px;
              height: 32px;
              float: left;
              margin: 10px;
              border-radius: 100%;
              border: 1px solid #cccccc;
              text-align: center;
              line-height: 32px;
              &.cur{
                  background: #075ebb;
                  color: #ffffff;
              }
          }
      }
  }
  /deep/.van-nav-bar__right {
    padding-right: 20px;
  }
    .loading{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
        &>div{
            width: 112px;
            height: 112px;
            background: rgba(0,0,0,.5);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            border-radius: 16px;
            &>div:first-child{
                margin-bottom: 5px;
            }
        }
    }
    /deep/.van-dialog__content {
        padding: 0;
    }
</style>
